<template>
    <div class="body_box">
        <!-- app-container -->
        <div class="head">
               
                <div class="head_column">
                    <div style="font-size: 15px;">{{ date.name }}</div>
                    <div style="font-size: 14px; padding-top: 30px; ">{{ date.createTime }}</div>
                    <div style="font-size: 14px; padding-top: 30px; display: flex;flex-direction: row;">收益：<div style="color: #ff5800;">¥ {{ date.income }}</div></div>
                </div>
        </div>
        <div class="listBox">

            <el-table ref="table" v-loading="loading" :data="tabList" stripe border>
                <!-- <el-table-column label="序号" align="center" type="index" width="64px" /> -->
                <el-table-column label="日期" align="center" prop="incomeDate" :show-overflow-tooltip="true"  />
                <el-table-column label="收益" align="center" prop="income" :show-overflow-tooltip="true"  />
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList"></pagination>
        </div>
    </div>
</template>
<script>
import {
    getVideoIncome,
    getVideoIncomeList
} from "@/api/setting/talent";
export default {
    data() {
        return {
            loading: false,
            total: 0,//状态字典数组
            //表格数据
            tabList: [],
            date: {},
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                id: '', 
            },
        }
    },
    created() {
        this.id = this.$route.query.id;
        this.queryParams.id = this.id
        this.getInfo()
        this.getList()
    },
    methods: {
        getInfo() {
            getVideoIncome(this.id).then((response) => {
                this.date = response.result
            });
        },
        
        /** 查询列表 */
        getList() {
            this.loading = true;
            getVideoIncomeList(this.queryParams).then((response) => {
                response.result.records.forEach(item => {
                    for (var key in item) {
                        if (item[key] === '') {
                            item[key] = "-";
                        }
                    }
                });
                this.tabList = response.result.records;
                this.total = response.result.total;
                this.loading = false;
            });
        },
    },
};

</script>
<style scoped scoped lang="scss">
::v-deep .el-table .DisableSelection .cell .el-checkbox__inner {
    display: none;
}

.body_box {
    padding: 20px;
}

.head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    display: flex;
}
.head_column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 20px;
}
.listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
}

.listBox_head {
    padding: 0 0 5px 0;
}

.el-dropdown {
    margin-left: 10px;
}

.main_top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
    color: #333;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 10px;

}
</style>
  